<template name="inform">
    <view class="inform">
        <view class="inform-content">

            <mescroll ref="mescrollRef" @init="mescrollInit" height="100%" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
                <!-- 交易物流 -->
                <block v-if="show==false">
                    <view class="inform-list" v-for="(item,inx) in getexpressList" :key="inx">
                        <!-- 商店信息 -->
                        <view class="list-top" @click="toShop(item)">
                            <view class="shop-icon">
                                <image :src="staticImgUrl+'chat/shop.png'" mode=""></image>
                            </view>
                            <view class="shop-name">
                                {{item.site_name}}
                            </view>
                            <view class="right-icon" style="margin-top: 8rpx;">
                                <image :src="staticImgUrl+'chat/right.png'" mode=""></image>
                            </view>
                        </view>
                        <!-- 订单状态 -->
                        <view class="list-center">
                            <view class="center-status">
                                <view class="status-text">{{item.content}}</view>
                                <view class="unread-icon" v-if="item.read_time==0">
                                    <image :src="staticImgUrl+'chat/unread.png'" mode=""></image>
                                </view>
                            </view>
                            <view class="center-time">{{item.format_time}}</view>
                        </view>
                        <!-- 订单简介 -->
                        <view class="list-bottom" @click="toOrder(item)">
                            <view class="details-img">
                                <image :src="item.sku_image" mode=""></image>
                            </view>
                            <view class="details-text">
                                <view class="text-infos textoverflow">
                                    {{item.sku_name}}
                                </view>
                                <view class="text-seemore">
                                    点击查看>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
                <!-- 系统通知 -->
                <block v-else>
                    <view class="hasTime" v-for="(item,inx) in getsystemList" :key="inx">
                        <view class="msg-time">{{item.format_time}}</view>
                        <view class="inform-list">
                            <!-- 订单状态 -->
                            <view class="list-center" style="margin-top: 0rpx;">
                                <view class="center-status">
                                    <view class="status-text">{{item.content}}</view>
                                    <view class="unread-icon" v-if="item.read_time==0">
                                        <image :src="staticImgUrl+'chat/unread.png'" mode=""></image>
                                    </view>
                                </view>
                            </view>
                            <!-- 订单简介 -->
                            <view class="list-bottom">
                                <view class="details-img">
                                    <image :src="item.image" mode=""></image>
                                </view>
                                <view class="details-text">
                                    <view class="text-infos">
                                        {{item.remark}}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>

            </mescroll>

        </view>
    </view>
</template>
<script>
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js'
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin],
	name: 'Inform',
	data() {
		return {
			page: 1,
			getexpressList: [],
			getsystemList: [],
			mescroll: null,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: this.tipText || '~空空如也~' // 提示
				}
			}

		}
	},
	// 属性
	props: {
		show: {
			// 返回事件判断显示
			type: Boolean,
			default: false
		},
		tipText: {
			type: String,
			default: ''
		}
	},
	mounted() {

	},
	onShow() {
	},
	methods: {
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
		},
		/* 下拉刷新的回调 */
		downCallback(e) {
			// this.mescroll.resetUpScroll();
			if (this.show == false) {
				this.getexpress(1, 20)
			} else {
				this.getsystem(1, 20)
			}
		},
		/* 上拉加载的回调 */
		upCallback(page) {
			console.log('logpage', page)
			// this.mescroll.endSuccess(0);
			// console.log('上拉加载的回调')
			// var page = this.page
			// page++
			if (this.show == false) {
				this.getexpress(page.num, 20)
			} else {
				this.getsystem(page.num, 20)
			}
		},
		getexpress(page, page_size) {
			this.$request.membertalkGetexpress({
				page,
				page_size
			}).then(res => {
				console.log('getexpress', res)
				this.mescroll.endSuccess(res.data.list.length)
				if (res.data.list.length > 0) {
					if (page == 1) {
						this.getexpressList = res.data.list
						this.page = 1
					} else {
						this.getexpressList = this.getexpressList.concat(res.data.list)
						this.page = page
					}
				}
			}).catch(() => {
				this.mescroll.endErr()
			})
		},
		getsystem(page, page_size) {
			this.$request.membertalkGetsystem({
				page,
				page_size
			}).then(res => {
				console.log('getsystem', res)
				this.mescroll.endSuccess(res.data.list.length)
				if (res.data.list.length > 0) {
					if (page == 1) {
						this.getsystemList = res.data.list
						this.page = 1
					} else {
						this.getsystemList = this.getsystemList.concat(res.data.list)
						this.page = page
					}
				}
			}).catch(() => {
				this.mescroll.endErr()
			})
		},
		toShop(item) {
			this.$util.redirectTo('/shopPages/shop/shop', {
				site_id: item.site_id
			})
		},
		toOrder(item) {
			this.$util.redirectTo('/shopPages/my/orderinfo', {
				order_id: item.order_id
			})
		}

	}
}
</script>
<style lang="scss" scoped>
image {
    width: 100%;
    height: 100%;
}

.textoverflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-time {
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    padding-bottom: 16rpx;
}

.inform-content {
    width: 100%;
    padding-top: 26rpx;
    padding-bottom: 26rpx;

    .inform-list {
        width: 702rpx;
        height: auto;
        background: #ffffff;
        border-radius: 16rpx;
        margin: 0 auto 24rpx auto;
        padding: 30rpx;

        .list-top {
            display: flex;
            justify-content: flex-start;

            .shop-icon {
                width: 32rpx;
                height: 32rpx;
            }

            .shop-name {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #222222;
                padding-left: 10rpx;
                padding-right: 10rpx;
            }

            .right-icon {
                width: 14rpx;
                height: 24rpx;
            }
        }
    }
}

.list-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40rpx;

    .center-status {
        display: flex;

        .status-text {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 800;
            color: #222222;
        }

        .unread-icon {
            width: 14rpx;
            height: 14rpx;
            margin-left: 16rpx;
        }
    }

    .center-time {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
    }
}

.list-bottom {
    width: 100%;
    height: auto;
    background: #fafafa;
    margin-top: 24rpx;
    display: flex;
    align-items: center;

    .details-img {
        width: 140rpx;
        height: 140rpx;
    }

    .details-text {
        padding-left: 20rpx;

        .text-infos {
            width: 468rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #000000;
        }

        .text-seemore {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #000000;
            padding-top: 24rpx;
        }
    }
}
</style>
